import React from 'react'
import { connect } from 'dva'
import { Select } from 'antd'
const Option = Select.Option;

/**
 * [PortSelect 产品选择框]
 */
class PortSelect extends React.Component {
  state = {
    data: this.props.data,
    value: this.props.value,
  }

  componentDidMount(){
    if(!this.props.portList){
      this.fetchListData()
    }
    
    if(this.props.id){
      this.fetchData(this.props.id)
    }
  }


  componentWillReceiveProps(nextProps) {
    if (nextProps.portfolio.currentPort !== this.props.portfolio.currentPort) {
      const currentData = nextProps.portfolio.currentPort
      this.setState({
        value: {
          key: currentData.productId,
          label: currentData.productCode + '：' + currentData.productName
        }
      })
    }
    if (nextProps.portfolio.portList !== this.props.portfolio.portList) {
      const data = nextProps.portfolio.portList.map(item => ({
        id: item.productId + '',
        name: item.productCode + '：' + item.productName
      }))
      this.setState({
        data,
      })
    }
  }

  fetchData=(id)=>{
    this.props.dispatch({
      type: `portfolio/getOnePdt`,
      id,
    })
  }

  fetchListData=(value)=>{
    const payload={}
    payload.term=value
    if(this.props.productType) payload.productType=this.props.productType
    this.props.dispatch({
      type: `portfolio/getPdtList`,
      payload
    })
  }

  handleSearch = (value) => {
    if (!this.state.data.length) {
      // 如果查询数据为空，超过1个字符，请求
      if (value.length > 1) {
        this.fetchListData(value)
      }
    } else {
      // 如果查询数据不为空，少于2个字符，清空查询数据
      if (value.length < 2) {
        this.setState({
          data: []
        })
      }
    }
  }

  handleSelect = (value) => {
    this.setState({
      value,
    })
    this.changeRouter(value.key)
  }

  handleChange = (value) => {
    if (!value) {
      this.setState({
        data: [],
        value: { key: '', label: '' },
      })
    }
  }

  changeRouter(val) {
    const payload=this.props.location
    if(this.props.type){
      payload.query.productID=val
    }else{
      payload.query.lPortId=val
    }
    
    this.props.dispatch({
      type: `app/changeRouter`,
      payload
    })

  
  }
  render() {
    const { value, data } = this.state
    return (
      <Select
        showSearch
        style={{ width: 180 }}
        onSelect={this.handleSelect.bind(this)}
        labelInValue
        value={value}
        onSearch={this.handleSearch.bind(this)}
        onChange={this.handleChange.bind(this)}
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      >
        {
          data.map((item, index) => <Option value={item.id} key={index}>{item.name}</Option>)
        }
      </Select>
    )
  }
}
PortSelect.defaultProps = {
  id:null,
  value: { key: '', label: '' },
  data: [],
  portfolio: {},
  productType:null,
  location: {
    pathname: '/',
    query: {},
  },
}

export default connect(({ portfolio }) => ({ portfolio }))(PortSelect)
